<template>
  <div id="login">
    <div v-if="titletype===2" id="logintitle2"></div>
    <div v-else-if="titletype===1" id="logintitle"></div>
    <div id="loginbox" class="login-container">
      <div id="loginleft"></div>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm">
        <div class="logintitle">用户登录</div>
        <div style="border-top:1px solid #fff;padding:20px 40px;">
          <el-form-item prop="account" >
            <el-input type="text" v-model.trim="ruleForm2.account" auto-complete="off" placeholder="请输入用户名" prefix-icon="icon iconfont icon-yonghu">
            </el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="请输入密码" prefix-icon="icon iconfont icon-mima" @keyup.enter.native="handleSubmit2"></el-input>
          </el-form-item>
          <!-- <el-checkbox v-model="checked" class="remember">记住密码</el-checkbox> -->
          <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;font-size:16px;background:#0064c8;border:0" @click.native.prevent="handleSubmit2" :loading="logining">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
          </el-form-item>
        </div>
      </el-form>
      <p style="line-height:180%; font-size:14px;color:#fff;text-align:center;clear:both; padding-top:20px">本系统支持Chrome、Firefox浏览器<br>自然资源部</p>
      <div id="logintext"></div>
    </div>
  </div>
</template>

<script>
import * as types from './store/types'
import qs from 'qs'
import JSEncrypt from 'jsencrypt'

export default {
  data () {
    return {
      logining: false,
      ruleForm2: {
        account: '',
        checkPass: ''
      },
      rules2: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        checkPass: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      checked: false,
      userRoles: '',
      titletype: 0
    }
  },
  methods: {
    handleReset2 () {
      this.$refs.ruleForm2.resetFields()
    },
    inRoles (str) {
      let arr = this.userRoles
      // arr = 'aaabbROLE_admin'
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    handleSubmit2 (ev) {
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
          this.logining = true
          this.$http
            .post('/account/mm')
            .then(res => {
              var encryptor = new JSEncrypt()
              let pubKey = res.data.pk
              encryptor.setPublicKey(pubKey)// 设置公钥
              var rsaPassWord = encryptor.encrypt(this.ruleForm2.checkPass)
              var loginParams = { Username: this.ruleForm2.account.toLowerCase(), Password: rsaPassWord, RememberMe: this.checked }
              this.$http
                .post('/account/login', qs.stringify(loginParams), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                .then(response => {
                  this.logining = false
                  if (response.data.IsSuccess === true) {
                    this.userRoles = JSON.stringify(response.data.Result)
                    console.log('登录成功')
                    var token = 'token'
                    var params = {data: token, user: this.ruleForm2.account, Roles: this.userRoles, pwdFlag: !!response.data.Passwordrule, unitName: response.data.Unitname}
                    // 保存cookie和登录名
                    this.$store.commit(types.LOGIN, params)
                    // 跳转到主页
                    if (this.inRoles('ROLE_other')) {
                      localStorage.setItem('Otherunitname', response.data.Otherunitname)
                      if (response.data.Passwordrule) {
                        this.$router.replace('/unit/home')
                      } else {
                        this.$router.replace('/unit/password')
                      }
                    } else {
                      if (response.data.Passwordrule) {
                        this.$router.replace('/home')
                      } else {
                        this.$router.replace('/password')
                      }
                    }
                  } else {
                    console.log('登录失败:' + response.data.Msg)
                    this.$message({
                      message: '登录失败:' + response.data.Msg,
                      type: 'error'
                    })
                  }
                })
                .catch(error => {
                  console.log(error)
                  this.logining = false
                })
            })
            .catch(err => {
              this.logining = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted () {
    if (document.title !== '') {
      if (document.title.includes('子系统')) {
        this.titletype = 2
      } else {
        this.titletype = 1
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#loginleft{
  width:650px;
  height:320px;
  float:left;
  background:url(./assets/login_pic.png)
}
#logintitle{
  width:900px;
  height:80px;
  background: url(./assets/logintitle.jpg);
  margin:145px auto 35px;
}
#logintitle2{
  width:900px;
  height:80px;
  background: url(./assets/logintitle2.jpg);
  margin:145px auto 35px;
}
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  background-clip: padding-box;
  margin: 0 auto;
  width: 1000px;
  height: 320px;
  background: #e9eef2;
  box-shadow: 0 0 25px #204F7F;
  .demo-ruleForm{
    width:350px;
    float: left;
  }
  .title {
    margin: 0px auto 40px auto;
    font-size:22px;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 20px 5px;
  }
  .logintitle{
    border-bottom:1px solid #d3d8dc;
    width:350px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size:20px;
    font-weight: bolder;
    color:#0064c8;
  }
  #logintext{
    width:350px;
    height:20px;
    background: url(./assets/logintext.png);
    margin:0 auto;
  }
}
</style>
